<template>
  <!-- <div class="box"> -->
  <div class="box">
        <div class="top">
            <!-- <span>我的全部购物车({{Object.keys(cartList).length}})</span> -->
            <span>我的全部购物车({{allLength}})</span>
            
        </div>
        <template v-for="productList in cartList" :key="productList.id">
            <div class="productInfo">
                <div class="product">
                    <template v-for="item in productList">
                        <div class="item">
                            <div style="margin-right: 16px">
                                <img class="item__img" :src="item.imgUrl" alt="" />
                            </div>
                            <div style="flex: 1" class="item__right">
                                <span class="item__title">{{ item.name }}</span>
                                <div style="height: 8px"></div>
                                <span class="item__price">¥{{ item.price }} × {{ item.count }} </span>
                                <div class="item__plusBox">
                                    <span style="flex: 1; text-align: center;font-size: 14px;">
                                        ¥{{ (item.price * item.count).toFixed(2) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>
    <DockerVue ></DockerVue>
  </div>
</template>
<script>
import DockerVue from "@/components/Docker.vue";
import { useStore } from "vuex";
import { useCommomCartEffect } from "../../effect/useCartEffect.js";
const cartEffect = (shopId) => {
  const { productList, cartList } = useCommomCartEffect(
    shopId
  );
  return {
    productList,
    cartList,
  };
};

export default {
  components: {
    DockerVue,
  },
  setup() {
    const {productList,cartList} = cartEffect(1);//因为是读取所有内容，所有shopip象征性的传个1
    let allLength = 0;
    for(let key in cartList){
        allLength += Object.keys(cartList[key]).length;// 计算商品总数
    }
    return { cartList,productList,allLength };
  },
};
</script>
<style lang="scss" scoped>
    // position: relative;
.box{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #f8f8f8;
    .top{
        font-weight: bold;
        height: 64px;
        width: 100%;
        text-align: center;
        background-color: #fff;
        line-height: 64px;
        font-size: 16px;
        color: #333333;
    }
    .productInfo {
    width: 330px;
    margin: 0 auto;
    // height: 10px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    .product {
      bottom: 0px;
      left: 0px;
      right: 0px;
      img {
        width: 46px;
        height: 46px;
      }

      .item {
        margin-top: 10px;
        display: flex;

        &__img {
          margin-left: 15px;
        }

        img {
          width: 56px;
          height: 56px;
        }

        &__plusBox {
          width: 60px;
          float: right;
          margin-right: 10px;
          display: flex;
        }

        &__right {
          border-bottom: 1px solid #f1f1f1;
          padding-bottom: 12px;
        }

        &__title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          line-height: 22px;
        }

        &__desc1 {
          font-size: 13px;
          color: #333;
          line-height: 18px;
          margin-right: 16px;
        }

        &__price {
          color: #e93b3b;
        }

        &__oldPrice {
          color: #999;
          font-size: 10px;
          text-decoration: line-through;
        }

        &__icon {
          color: #0091ff;
          font-size: 19px;
          flex: 1;
        }

        &__discountinfo {
          color: #e93b3b;
          font-size: 13px;
          line-height: 18px;
        }
      }
    }
  }
}
</style>
